import store from '@/store/index.ts';
<template>
  <v-card
    @click="$router.push('/addresses')"
    class="d-flex justify-space-between align-center pa-3"
    flat
  >
    <div class="d-flex align-center">
      <v-avatar size="35" color="#FD994B">
        <v-icon dark>mdi-map-marker</v-icon>
      </v-avatar>
      <div class="d-flex flex-column justify-space-between ml-3">
        <span v-if="address.name">
          <span class="subtitle-1" v-text="address.name"></span>
          <span
            class="subtitle-2 text--secondary ml-3"
            v-text="address.tel"
          ></span>
        </span>
        <span
          v-if="address.name"
          class="subtitle-2"
          v-text="
            address.province +
              address.city +
              address.region +
              address.detailAddress
          "
        ></span>
        <span v-else class="text--secondary mb-1">点击添加一个收货地址</span>
        <span class="subtitle-2 red--text">收货不便时，可选择免费暂存服务</span>
      </div>
    </div>
    <v-icon>mdi-chevron-right</v-icon>
  </v-card>
</template>

<script>
export default {
  name: 'user-address-info',
  mounted() {
    this.$store.dispatch('getDefaultReceiveAddress');
  },
  computed: {
    address() {
      return this.$store.state.defaultReceiveAddress;
    }
  }
};
</script>
